<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<script src="/resources/js/jquery.1.9.1.min.js"></script>
<script src="/resources/js/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="/resources/js/load-ranking-data.js"></script> -->
<title>Bảng xếp hạng</title>
<script type="text/javascript">
$(function() {
	$('#bxh-loader').fadeOut();
	load_full_charts = function(type){
		$('#bxh-content .bxh-content-detail').css('display','none');
		var loaded = false;
		var currentDiv = null;
		$('#bxh-type-nav li').removeClass('active');
		switch(type) {
		    case 'WEEK':
		    	currentDiv = $('#bxh-content-week');
		    	if($.trim($(currentDiv).html()) != ""){
		    		loaded = true;
		    	}
		    	$(currentDiv).css('display','block');
		    	$($('#bxh-type-nav li')[0]).addClass('active');
		        break;
		    case 'MONTH':
		    	currentDiv = $('#bxh-content-month');
		    	if($.trim($(currentDiv).html()) != ""){
		    		loaded = true;
		    	}
		    	$(currentDiv).css('display','block');
		    	$($('#bxh-type-nav li')[1]).addClass('active');
		        break;
		};
		if(!loaded){
			$('#bxh-loader').fadeIn();
			$.get("/bang-xep-hang/" + type, function(data) {
				$('#bxh-loader').fadeOut();
				for (var i = 0; i < data.length; ++i) {
					var obj = data[i];
					var html = "<div class='photoListItem'>	<div class='listItemSeparator'></div><span class='number special-"+ (i + 1)+"'>" + (i + 1)+"</span> "
							+  "<div class='photoThumbnail'><a href='/photo/" + obj.troll.id + "' target='_blank'> <img src='/resources/data/photos/thumbnails/"
							+  obj.troll.url + "' alt='" + obj.troll.title + "' class='thumbImg'></a></div><div class='info'> "
							+  "<h2><a href='/photo/" + obj.troll.id + "'>" + obj.troll.title + "</a></h2><div class='uploader'>Đăng bởi <a href='/uploader/" + obj.troll.uploader.id + "'>" + obj.troll.uploader.name + "</a></div> "
							+  "<div class='stats'><div class='viewComments'><span class='views' title='lượt xem'>" + obj.troll.viewNumber.format() + "</span> "
							+  "<span class='comments' title='lượt bình luận'>" + obj.troll.commentNumber.format()
							+  "</span></div></div></div><div class='Z-Chart'>" + obj.total + "</div>";
					$(currentDiv).append(html);
				};
			}, 'json').fail(function(e, data) {
				alert("error " + data);
			});
		}
	};
	Number.prototype.format = function(n, x) {
	    var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\.' : '$') + ')';
	    return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&.');
	};
});
</script>
</head>
<body>
	<tiles:insertDefinition name="mobileDefaultTemplate">
		<tiles:putAttribute name="body">
			<div id="mainContainer" style="padding-bottom: 20px;">
				<div class="mainBox">
					<div class="subHeading">
						<h3 style="float:left">Bảng Xếp Hạng</h3>
						<h3 style="float:right"><a href="/uploader/top">Top Danh Hài</a></h3>
					</div>
					<div class="bxh-type-nav">
						<ul id="bxh-type-nav" class="nav nav-pills">
							<li onclick="load_full_charts('WEEK')" class="active" style="margin-right: 30px;"><a>Xếp Hạng Theo Tuần</a></li>
							<li onclick="load_full_charts('MONTH')"><a>Xếp Hạng Theo Tháng</a></li>
						</ul>
					</div>
					<div id="bxh-content" class="bxh-content">
						<div id="bxh-content-week" class="bxh-content-detail">
							<c:forEach items="${chartsDetails}" var="chartsItem"
								varStatus="loop">
								<div class="photoListItem">
									<div class="listItemSeparator"></div>
									<span class="number special-${loop.index + 1}">${loop.index
										+ 1}</span>
									<div class="photoThumbnail">
										<a href="photo/${chartsItem.troll.id }" target="_blank"> <img
											src="/resources/data/photos/thumbnails/${chartsItem.troll.url }"
											alt="${chartsItem.troll.title}" class="thumbImg">
										</a>
									</div>
									<div class="info">
										<h2>
											<a href="photo/${chartsItem.troll.id }">${chartsItem.troll.title}</a>
										</h2>
										<div class="uploader">
											Đăng bởi <a href="/uploader/${chartsItem.troll.uploader.id }">${chartsItem.troll.uploader.name
												}</a>
										</div>
										<div class="stats">
											<div class="viewComments">
												<span class="views" title="lượt xem"><fmt:formatNumber pattern="#,###,##0" value="${chartsItem.troll.viewNumber}" /></span>
												<span class="comments" title="lượt bình luận"><fmt:formatNumber pattern="#,###,##0" value="${chartsItem.troll.commentNumber}" /></span>
											</div>
										</div>
									</div>
									<div class="Z-Chart">${chartsItem.total}</div>
								</div>
							</c:forEach>
						</div>
						<div id="bxh-content-month" class="bxh-content-detail" style="display:none">
						</div>
						<div id="bxh-loader" class="loader">
							<span></span> <span></span> <span></span>
						</div>
					</div>
				</div>
			</div>
		</tiles:putAttribute>
	</tiles:insertDefinition>
</body>
</html>